<!-- 法务分包商选择 -->
<template>
    <!-- 支持输入的选择框 -->
    <a-auto-complete
        v-if="isInput"
        v-bind="$attrs"
        v-on="$listeners"
        v-model="currentValue"
        :placeholder="placeholder"
        :filter-option="filterOption"
        :dataSource="Subcontractor"
    ></a-auto-complete>
    <!-- 普通选择框 -->
    <a-select
        v-else
        v-bind="$attrs"
        v-on="$listeners"
        :placeholder="placeholder"
        v-model="currentValue"
        @change="handleBindName"
        :option-filter-prop="optionFilterProp"
        :filter-option="filterOption"
    >
        <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
        <a-spin v-if="fetching" slot="notFoundContent" size="small" />
        <a-select-option v-else v-for="i in Subcontractor" :key="i.subContractorId" :value="i.subContractorId"
            >{{ i.name }}
        </a-select-option>
    </a-select>
</template>
<script>
import { getSubcontractorLegal } from '@/api/businessAffairs/sml'

export default {
    name: 'SelectSubcontractor',
    props: {
        bindName: {
            type: String,
            default: () => {
                return ''
            },
        },
        // 表单是否可输入
        isInput: {
            type: Boolean,
            default: () => false,
        },
        // v-model绑定的数据
        value: {
            type: [Array, String, Object],
        },
        // 需要联动的表单，
        form: {
            type: Object,
            default: () => {
                return {}
            },
        },
        // 需要联动的表单名
        keyValue: {
            type: Array,
            default: () => ['branchComId', 'projectId'],
        },
        // 联动表单值改变时是否清空当前表单值
        isClear: {
            type: Boolean,
            default: () => true,
        },
        // 项目id
        projectId: {
            type: String,
            default: () => '',
        },
        // placeholder
        placeholder: {
            type: String,
            default: () => '请选择',
        },
        // 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索,否则为value
        optionFilterProp: {
            type: String,
            default: () => 'children',
        },
        //如果是编辑，第一次不要重置绑定的值。。。。
        isEdit: {
            type: Boolean,
            default: () => false,
        },
    },
    data() {
        return {
            isCanClear: !this.isEdit,
            fetching: false,
            Subcontractor: [],
        }
    },
    methods: {
        handleBindName(v) {
            let res = this.Subcontractor.find((item) => item.subContractorId === v)
            if (res) {
                this.$emit('update:bindName', res.name)
            }
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        /**
         * 获取列表
         */
        getSubcontractorList() {
            console.log(this.keyValue[0])
            if (!this.form[this.keyValue[0]] || !this.form[this.keyValue[1]]) {
                return
            }

            let params = {
                branchCompanyId: this.form[this.keyValue[0]],
                projectId: this.form[this.keyValue[1]],
            }
            this.fetching = true
            getSubcontractorLegal(params)
                .then((res) => {
                    this.fetching = false
                    if (res.code === 200) {
                        res.data.forEach((item) => {
                            item.text = item.name
                            item.value = item.subContractorId
                        })
                        this.Subcontractor = res.data
                        this.$emit('update:list', this.Subcontractor)
                        this.$emit(
                            'update:option',
                            this.Subcontractor.find((item) => item.subContractorId === this.currentValue)
                        )
                        this.$emit(
                            'getOption',
                            this.Subcontractor.find((item) => item.subContractorId === this.currentValue)
                        )
                    }
                })
                .catch((res) => {
                    this.fetching = false
                })
        },
    },
    computed: {
        // 需要联动的表单值
        attr() {
            let attr = {}
            attr[this.keyValue[0]] = this.form[this.keyValue[0]]
            attr[this.keyValue[1]] = this.form[this.keyValue[1]]
            return attr
        },
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                return this.value || void 0
            },
            set: function (value) {
                this.$emit('input', value)
            },
        },
    },
    mounted() {
        this.getSubcontractorList()
    },
    watch: {
        currentValue(value) {
            this.$nextTick(() => {
                if (value && this.Subcontractor.length > 0) {
                    this.$emit(
                        'update:option',
                        this.Subcontractor.find((item) => item.subContractorId === value)
                    )
                    this.$emit(
                        'getOption',
                        this.Subcontractor.find((item) => item.subContractorId === this.currentValue)
                    )
                }
            })
        },
        projectId(val) {
            // 清空表单
            if (this.isClear) {
                this.currentValue = void 0
            }
            // 清空表单
            if (this.isEdit && this.isCanClear) {
                this.currentValue = void 0
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            } else {
                this.isCanClear = true
            }
            // 重置列表
            this.Subcontractor = []
            val && this.getSubcontractorList({ query: { branchComIds: [val] } })
        },
        attr(val, old) {
            if (val[this.keyValue[0]] === old[this.keyValue[0]] && val[this.keyValue[1]] === old[this.keyValue[1]]) {
                return
            }
            // 清空表单
            if (this.isClear && !this.isEdit) {
                this.currentValue = void 0
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            }
            // 清空表单
            if (this.isEdit && this.isCanClear) {
                this.currentValue = void 0
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            } else {
                this.isCanClear = true
            }
            // 重置列表
            this.list = []
            val && this.getSubcontractorList()
        },
    },
}
</script>
